﻿<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scale</title>
<script type="text/javascript" src="../jquery-1.2.4b.js"></script>

<script type="text/javascript" src="../effects.core.js"></script>
<script type="text/javascript" src="../effects.scale.js"></script>


<style type="text/css" media="screen">
body {
  font-size: 10px;
  font-family: Arial; 
  margin:0; padding:0;
}
.controls {font-size:12px;width:510px;margin:0 auto;border:1px solid #ccc;}
.controls a {display:block; width:150px;float:left;}
.controls div {padding:10px;clear:both;}
.text {font-size: 12px;margin:5px 0;background:#f7f7f7;border:1px dotted #aaa;padding:4px;}
#container {height:420px; width:510px; margin:0 auto;}
#fx {width:500px;background:#efefef;border:5px solid #aaa; text-align:center;} 
/* cheat */ #fx img {padding:0 20px;}
</style>
</head>
<body>

<div class="controls">
  <div>
    <a href="#" onClick="$('#fx').effect('size', {to: {width:500, height:343}} );return false;">Size to original</a>
    <a href="#" onClick="$('#fx').effect('size', {to: {width: 200, height: 80}} );return false;">Size to 200 x 80</a>
    <a href="#" onClick="$('#fx').effect('size', {to: {width: 640, height: 480}} );return false;">Size to 640 x 480</a>
  </div>
  <div>
    <a href="#" onClick="$('#fx').effect('scale', {percent: 200} );return false;">Scale 200%</a>
    <a href="#" onClick="$('#fx').effect('scale', {percent: '50%'} );return false;">Scale 50%</a>
    <a href="#" onClick="$('#fx').effect('scale', {percent: '125%', direction: 'horizontal'} );return false;">Scale 120% width only</a>
  </div>
  <div>
    <a href="#" onClick="$('#fx').show('scale');return false;">Scale up (Grow)</a>
    <a href="#" onClick="$('#fx').hide('scale');return false;">Scale down (Shrink)</a>
    <a href="#" onClick="$('#fx').toggle('scale');return false;">Scale Toggle</a>
  </div>
  <div>
    <a href="#" onClick="$('#fx').show('scale',{ origin: ['bottom', 'left']});return false;">Scale up from bottom left</a>
    <a href="#" onClick="$('#fx').hide('scale',{ origin: ['top', 'right']});return false;">Scale down to top right</a>
    <a href="#" onClick="$('#fx').toggle('scale',{ origin: [90, 385]});return false;">Scale Toggle from a point</a>
  </div>
  <div>
    <a href="#" onClick="$('#fx').toggle('scale',{ scale: 'box', origin: ['top', 'left']});return false;">Scale 'box' mode</a>
    <a href="#" onClick="$('#fx').toggle('scale',{ scale: 'content', origin: ['top', 'left']});return false;">Scale 'content' mode</a>
    <a href="#" onClick="$('#fx').toggle('scale',{ scale: 'none', origin: ['top', 'left']});return false;">Scale 'none' mode</a>
  </div>
  <div>
    <a href="#" onClick="$('#fx').hide('puff');return false;">Puff Out</a>
    <a href="#" onClick="$('#fx').show('puff');return false;">Puff In</a>
    <a href="#" onClick="$('#fx').toggle('puff');return false;">Puff Toggle</a>
  </div>
  <div style="clear:both;padding-bottom:5px;"></div>
</div>

<div id="container">
  <div class="text">Header Content</div>
  <div id="fx">
  <div style='padding:2px;'>Scale Me!</div>
  <img src="images/very-cute-puppy.jpg">
  <div style='padding:2px;'>What a <b>cute</b> puppy!</div>
  </div>
  <div class="text">Footer Content</div>
</div>

 

</body>
</html>
